<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由loader介绍和使用</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
			 前端渲染  和后端渲染（较多）
			 1.url的hash和html5中history
			 history.pushState({},'','about')
			 undefined
			 history.replaceState({},'','home')
			 都可以改变url的路径
			 
			 2.vue-rouder是vue.js官方的路由插件
			 3.安装和使用vue-rouder
			 命令：npm install vue-rouder --save
			 4.使用vue-router的步骤：
				第一步：创建路由组件
				第二步：配置路由映射：组件和路径映射关系
				第三步：使用路由：通过<router-link>和<router-view>
			5.router-link属性
				经常使用是 to ="路径"
				tag属性  tag='button'就可以把它渲染成按钮
				replace属性  增加了这个属性就不能返回 不需要任何值
				 this.$router.push('/home');//通过代码的方式修改路由 vue-router
			6.vue-router动态路由的使用
					比如现在进入首页要显示用户id 用户名等  所以需要用到动态路由

			7.路由的懒加载
					输入命令：npm run  build进行打包
			8.路由懒加载的写法
					const Home = () => import('../components/Home.vue') 箭头函数的写法
			9.认识嵌套路由
				两个步骤：
				第一步创建对应的子组件  并且在路由映射总配置对应的子路由
				第二步：在组件内部使用 <router-view>标签
				比如在首页我们想显示两个字页面
				所以：在首页组件中添加子组件 
				{
					path:'/home',
					component:Home,
					children:{
						path:'字组件名称'
						path:'news',
						component:news
					}
				}
				然后在首页home页面
				增加<router-link to="子组件路径 home/news"></router-link>
			10.vue-router参数传递
				rul:协议：//主机：端口/路径?查询
				scheme://host:port/path?query#fragment
				是一个对象
				<router-link :to="{path:'/profile',query：{name:'xieyinpeng",age:16}} ></router-link>
				如果我们要使用query里面值显示到页面中 我们这样用:
				$route.query.name 依次下去
			 */
			
		</script>
	</body>
</html>
